<div class="row row-deck row-cards mt-3">
	<div class="col-sm-12 col-lg-8">
		<div class="card">
			<div class="card-header">
				<ul class="nav nav-tabs card-header-tabs nav-fill" data-bs-toggle="tabs" role="tablist">
					<li class="nav-item" role="presentation">
						<a href="#tabs-course-intro" id="a-tabs-course-intro" class="nav-link active" data-bs-toggle="tab" aria-selected="true" role="tab">课程介绍</a>
					</li>
					<li class="nav-item" role="presentation">
						<a href="#tabs-course-list" id="a-tabs-course-list" class="nav-link" data-bs-toggle="tab" aria-selected="false" role="tab" tabindex="-1">课程安排</a>
					</li>
					<li class="nav-item" role="presentation">
						<a href="#tabs-course-link" id="a-tabs-course-link" class="nav-link" data-bs-toggle="tab" aria-selected="false" role="tab" tabindex="-1">咨询</a>
					</li>
				</ul>
			</div>
			<div class="card-body">
				<div class="tab-content">
					<div class="tab-pane active show" id="tabs-course-intro" role="tabpanel">
						{% if info['introduce'] %}
							<div class="vditor-reset" id="preview">{{ info['introduce']['content']|markdown_to_html }}</div>
						{% else %}
							{{ include('@WebsiteBundle/empty.html.twig',{msg:'数据为空!'}) }}
						{% endif %}
					</div>
					<div class="tab-pane" id="tabs-course-list" role="tabpanel">
						{% if studyPlan is empty %}
							{% include '@WebsiteBundle/empty.html.twig' %}
						{% else %}
							{% if studyPlan['studyPlans'] %}
								{% for planv in studyPlan['studyPlans'] %}
									<div class="accordion" id="accordionCourse{{ planv['course']['id'] }}">
										<div class="accordion-item">
											<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ planv['course']['id'] }}" aria-expanded="true" aria-controls="collapse{{ planv['course']['id'] }}">
												{{ planv['course']['name'] }}
											</button>
										</div>
										<div id="collapse{{ planv['course']['id'] }}" class="accordion-collapse collapse show" data-bs-parent="#accordionCourse{{ planv['course']['id'] }}">
											<div class="accordion-body">
												{% if planv['course']['chapters'] is defined %}
													{% for chapters in planv['course']['chapters'] %}
														{% set topIndex= loop.index %}
														{% if chapters['child'] %}
															<div class="accordion" id="accordionCourse{{ chapters['id'] }}">
																<div class="accordion-item">
																	<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ chapters['id'] }}" aria-expanded="true" aria-controls="collapse{{ chapters['id'] }}">
																		{{ topIndex }}、{{ chapters['name'] }}
																	</button>
																</div>
																<div id="collapse{{ chapters['id'] }}" class="accordion-collapse collapse show" data-bs-parent="#accordionCourse{{ planv['course']['id'] }}">
																	<div class="accordion-body">
																		<ul class="list-group">
																			{% for childchapters in chapters['child'] %}
																				<li class="list-group-item">{{ topIndex }}-{{ loop.index }}、{{ childchapters['name'] }}</li>
																			{% endfor %}
																		</ul>
																	</div>
																</div>
															</div>
														{% else %}
															<ul class="list-group">
																<li class="list-group-item">{{ topIndex }}、{{ chapters['name'] }}</li>
															</ul>
														{% endif %}
													{% endfor %}
												{% endif %}
											</div>
										</div>
									</div>
								{% endfor %}
							{% else %}
								{% for groupGoods in studyPlan['child'] %}
									{% for planv in groupGoods['studyPlans'] %}
										<div class="accordion" id="accordionCourse{{ planv['course']['id'] }}">
											<div class="accordion-item">
												<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ planv['course']['id'] }}" aria-expanded="true" aria-controls="collapse{{ planv['course']['id'] }}">
													{{ planv['course']['name'] }}
												</button>
											</div>
											<div id="collapse{{ planv['course']['id'] }}" class="accordion-collapse collapse show" data-bs-parent="#accordionCourse{{ planv['course']['id'] }}">
												<div class="accordion-body">
													{% if planv['course']['chapters'] is defined %}
														{% for chapters in planv['course']['chapters'] %}
															{% set topIndex= loop.index %}
															{% if chapters['child'] %}
																<div class="accordion" id="accordionCourse{{ chapters['id'] }}">
																	<div class="accordion-item">
																		<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ chapters['id'] }}" aria-expanded="true" aria-controls="collapse{{ chapters['id'] }}">
																			{{ topIndex }}、{{ chapters['name'] }}
																		</button>
																	</div>
																	<div id="collapse{{ chapters['id'] }}" class="accordion-collapse collapse show" data-bs-parent="#accordionCourse{{ planv['course']['id'] }}">
																		<div class="accordion-body">
																			<ul class="list-group">
																				{% for childchapters in chapters['child'] %}
																					<li class="list-group-item">{{ topIndex }}-{{ loop.index }}、{{ childchapters['name'] }}</li>
																				{% endfor %}
																			</ul>
																		</div>
																	</div>
																</div>
															{% else %}
																<ul class="list-group">
																	<li class="list-group-item">{{ topIndex }}、{{ chapters['name'] }}</li>
																</ul>
															{% endif %}
														{% endfor %}
													{% endif %}
												</div>
											</div>
										</div>
									{% endfor %}
								{% endfor %}
							{% endif %}
						{% endif %}
					</div>
					<div class="tab-pane" id="tabs-course-link" role="tabpanel"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-sm-12 col-lg-4">
		<div class="vstack">
			<div class="mb-2">
				<div class="card card-sm">
					<div class="card-header">
						<h2 class="card-title">
							<strong>讲师</strong>
						</h2>
					</div>
					<div class="card-body">
						{% if info['teachers'] %}
							{% for t in info['teachers'] %}
								<div class="row">
									<div class="col-lg-6">
										<img src="{{ json_get(t['gravatar']) }}" class="rounded" style="width: 70px;"/>
									</div>
									<div class="col-lg-6">
										{{ t['name'] }}
									</div>
								</div>
							{% endfor %}
						{% endif %}
					</div>
				</div>
			</div>
			<div class="mb-2 sticky-top">
				<div id="outline"></div>
			</div>
		</div>
	</div>
</div>
